import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { NavBar, Icon, Drawer, List, Button, Modal, Picker } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import { connect } from "dva"
import styles from './Header.less';
let ListItem = List.Item;
import { goToPage, isNull } from "../utils/helper"
import { setLogout } from "../utils/request"
import MDrawer from "../components/MDrawer/MDrawer"
import MAction from "../components/MAction/MAction"
import MToast from '../components/Util/MToast';
import MIcon from '../components/MIcon';
import md5 from 'md5';
@connect(({ global }) => {
	return ({
		global: global
	})
})
export default class Header extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			titleArr: {
				"/create": "",
				"/edit": "",
				"/view": "",
				"/": "",
				"/page": "",
				"/map": "",
				"/changePassword": ""
			},
			showHeaderArr: ["/", "/create", "/edit", "/view", "/page", "/map", "/changePassword"],
			open: false
		}
	}

	onOpenChange = () => {
		this.setState({ open: !this.state.open });
	};
	componentDidMount() {
		let { location: { pathname, search } } = this.props;
		let formDataKey = md5(pathname + search);
		console.log("header-did1",formDataKey);
	}
	render() {
		let { location, dispatch, global, isModal } = this.props;
		let { headerTitle, navigate } = global;
		let { pathname, state, search } = location;
		let { titleArr, showHeaderArr, open } = this.state;
		if (showHeaderArr.indexOf(pathname) == -1) {
			return null
		}
		let title = state && state.title;
		if (isNull(title)) {
			title = headerTitle[pathname + search]
		}
		title = title || titleArr[pathname];
		let { default_page, default_page_title, globalMenu, globalLeftMenu: leftMenu } = global;
		title = default_page_title || title;
		document.title = localStorage[MI_APP_CODE+"website"] + " - " + title;
		if (browser.isInApp) {// 设置title
			Func.callHander(bridge, "setTitle", { "title": title });
		}
		if (browser.isInApp) {//是否是嵌套在App里
			return null;
		}
		if (globalMenu.length == 0) {
			return null
		}
		let homePath = "";
		let isTabbar = false;
		globalMenu.map(item => {
			if (item.code == default_page) {
				homePath = item.path;
			}
			if (item.path == pathname + search) {
				isTabbar = true;
			}
		});
		let rightContent = [];
		if (!isNull(navigate)) {
			let rightNavigate = navigate[pathname + search];
			if (!isNull(rightNavigate) && !isNull(rightNavigate.navigate) && rightNavigate.navigate.length > 0) {
				rightNavigate.navigate.map((item, key) => {
					let { img, event_key } = item || {};
					// rightContent.push(
					// 	<Picker
					// 		visible={this.state.visible}
					// 		data={
					// 			[
					// 				{ label: 1, value: 1 }
					// 			]
					// 		}
					// 		cols={1}
					// 		onOk={() => this.setState({ visible: false })}
					// 		onDismiss={() => this.setState({ visible: false })}
					// 	>
					// 		<img key={key} type="plus" style={{ width: "25px", height: "25px", marginLeft: "5px" }} src={img} onClick={() => this.setState({ visible: true })} />
					// 	</Picker>
					// )
					rightContent.push(<img key={key} type="plus" style={{ width: "25px", height: "25px", marginLeft: "5px" }} src={img} onClick={() => {
						MAction({ ...this.props, config: rightNavigate.config, data: {} }, event_key)
					}
					} />)
				})

			}
		}
		let leftMenus = [];
		leftMenu.map((item, key) => {
			let { label, icon, path } = item;
			leftMenus.push(
				<ListItem key={key} arrow="horizontal" onClick={() => {
					goToPage({
						dispatch,
						config: { url: path }
					});
					this.setState({ open: false })
				}}>
					<div data-flex="dir:left cross:center">
						<img style={{ marginRight: "5px" }} src={icon} alt="" />
						<span>{label}</span>
					</div>
				</ListItem>
			)
		});
		// pathname+search===homePath时 是首页
		if (isTabbar) {
			console.log("是首页");
			localStorage[MI_APP_CODE+"isHome"] = "true";
			let drawerClass = "my-drawer";
			let wrapClass = "my-wrap";
			if (!open) {
				drawerClass += " my-drawer-close";
				wrapClass += " my-wrap-close";
				document.getElementById("root").style.overflow = ""
			}
			else {
				document.getElementById("root").style.overflow = "hidden"
			}
			return (<div className={styles.header} id="header">
				<NavBar
					icon={<img onClick={() => {
						this.onOpenChange()
					}} style={{ width: "30px", height: "30px" }} src="./image/menu.png" alt="" />}
					rightContent={rightContent}
				>
					{default_page_title || title}
				</NavBar>
				<MDrawer open={open} onOpenChange={this.onOpenChange} className="header-drawer">
					<div className="header" data-flex="dir:left cross:center">
						<img src="./image/user.png" alt="" />
						{localStorage[MI_APP_CODE+"username"]}
					</div>
					<div className="list" style={{ overflow: "auto" }}>
						{
							leftMenu.length > 0 && <div style={{ marginTop: "20px" }}>
								{leftMenus}
							</div>
						}
						<div style={{ paddingLeft: "15px", height: "40px", lineHeight: "40px" }}>
							系统
						</div>
						{/* <ListItem arrow="horizontal" onClick={() => {
							goToPage({
								dispatch,
								config: { url: "/page" }
							});
							this.setState({ open: false })
						}}>清除缓存</ListItem> */}
						<ListItem arrow="horizontal" onClick={() => {
							goToPage({
								dispatch,
								config: { url: "/changePassword?" }
							});
							this.setState({ open: false })
						}}>修改密码</ListItem>
						{/* <ListItem arrow="horizontal" onClick={() => {
							goToPage({
								dispatch,
								config: { url: "/page" }
							});
							this.setState({ open: false });
						}}>系统</ListItem> */}
					</div>
					<div className="footer">
						<a href={localStorage[MI_APP_CODE+"copyright_url"]} style={{ color: "inherit" }}>{localStorage[MI_APP_CODE+"copyright"]} v{mi_version}</a>
						<Button style={{ background: "#ed4747", color: "#fff", borderRadius: "15px" }} size="default" onClick={() => {
							Modal.alert('温馨提示', '确定退出登录?', [{ text: '取消' },
							{
								text: '确定',
								onPress: () => {
									this.onOpenChange();
									setLogout();
								}
							}])
						}}>退出登录</Button>
					</div>
				</MDrawer>
			</div>);
		}
		else {
			console.log("不是首页");
			localStorage[MI_APP_CODE+"isHome"] = "false";
			return (
				<div className={styles.header} id="header">
					<NavBar
						mode="dark"
						icon={<img onClick={() => {
							if (isModal) {
								this.props.closeModal()
							}
							else {
								dispatch(routerRedux.go(-1));
							}
						}} src="image/arrow_left.png" style={{ width: "25px", height: "25px" }} />}
						rightContent={rightContent}

					>{title}</NavBar>
				</div>
			)
		}
	}
}
Header.propTypes = {
	location: PropTypes.object.isRequired
};